<template>
  <div>
    <div class="my-tag">
      <input
        class="input"
        type="text"
        placeholder="输入标签"
        v-if="type"
        @blur="type = false"
        @keyup.enter="enterSub"
        v-model="tag"
        v-focus
      />
      <!-- 注册鼠标双击事件dblclick, 双击文本显示输入框, 输入框失去焦点切换为文本 -->
      <div class="text" v-else @dblclick="handleDbl">{{ value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  proprs:{
    value: {  // v-model绑定组件, 必须使用value接收
      type: String,
    }
  },
  // 局部注册自定义指令实现页面加载自动获取焦点
  directives: {
    focus: {  // 自定义指令名
      inserted (el) {
        el.focus()
      },
    }
  },
  data() {
    return {
      type: false,
      tag: '',
    };
  },
  methods: {
    // 鼠标双击事件
    handleDbl() {
      this.type = true;
    },
    // 回车提交事件: 将输入框隐藏, 并子传父将输入框内容传给父组件
    // 由于使用了表单双双向绑定, 所以自定义事件名必须使用input
    enterSub() {
      this.$emit('input', this.tag);
      this.type = false
    }
  },
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>